<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用 layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./utils.js"></script>
    <script src="./common.js"></script>
    <script src="./page.js"></script>
    <style>
        .layui-nav {
            text-align: right;
        }

        .main {
            padding: 20px;
        }

        td {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul class="layui-nav">
        <li class="layui-nav-item activeInfo"></li>
    </ul>
    <div class="main">
        <div class="layui-panel">
            <div style="padding: 50px 30px;">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>发布时间</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <!-- 分页的容器 -->
                <div class="paginate"></div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    let activeInfo = getCookie('activeInfo') ? JSON.parse(getCookie('activeInfo')) : null;
    console.log(getCookie('activeInfo'));

    if (activeInfo) {
        // 登录状态
        document.querySelector('.activeInfo').innerHTML = `${activeInfo.mobile} 用户欢迎<button onclick='back()'>退出</button>`
    } else {
        document.querySelector('.activeInfo').innerHTML = '<a href="login.html">登录</a>'
    }
    function back() {
        removeCookie('activeInfo')
        document.querySelector('.activeInfo').innerHTML = '<a href="login.html">登录</a>'
    }

    let tbody = document.querySelector('tbody')
    //ajax请求
    /* 
            1.请求地址：url
            2.请求方式：method
            3.是否异步：async
            4.带给后端的数据：data
            5.请求头信息: headers
            6.是否解析响应体：dataType
            7.成功以后的函数：success
    */
    //初始化页面
    ajax({
        url: 'http://phpclub.org.cn/edu/server/news.php',
        data: { page: 1, pageSize: 10 },
        dataType: 'json',
        success: res => {
            res.data.forEach(v => {
                let tr = document.createElement('tr')
                for (const key in v) {
                    if (key === 'title') {
                        let td = document.createElement('td')
                        td.innerHTML = v[key]
                        tr.appendChild(td)
                    }
                    if (key === 'created_at') {
                        let td = document.createElement('td')
                        td.innerHTML = new Date(v[key] * 1000).toLocaleString()
                        tr.appendChild(td)
                    }
                }
                tbody.appendChild(tr)
            });

            // 给tbody添加事件监听
            tbody.addEventListener('click', e => {
                if (e.target.nodeName === 'TD') {
                    if (activeInfo) {
                        let trList = document.querySelectorAll('tbody tr')
                        let index = [...trList].indexOf(e.target.parentElement)
                        // removeCookie('newData')
                        setCookie('newId', JSON.stringify(res.data[index].id))
                        location.href = 'content.html'
                    } else {
                        location.href = 'login.html'
                    }

                }
            })
        }
    })



</script>